<template>
  <div class="detail">
     <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="scene" v-if="scene">
      <div class="img">
        <img :src="scene.designTemplateImageUrl" alt />
      </div>
      <div class="title">{{ scene.templateTitle }}</div>
      <div class="kind-title">{{ scene.kindTitle }}</div>
      <div class="">
        图片编号为{{ scene.designTemplateId }}，该手机海报尺寸是{{
        scene.width
        }}
        * {{ scene.height }}。点击“立即使用”， 《{{
        scene.templateTitle
        }}》一键生成，在线编辑图片，简单托拉拽，秒出精美 {{ scene.kindTitle }}。
      </div>
      <ul class="keywords">
        <li v-for="(s, i) in scene.keywords.split(' ')" :key="i">{{ s }}</li>
      </ul>
    </div>
<h3>为你推荐</h3>
    <div class="recommend">
      <router-link
        class="item"
        v-for="(t, j) in recommendedTemplates"
        :key="j"
        :to="'/detail/' + t.designTemplateId"
      >
        <img :src="t.designTemplateImageUrl" alt />
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      scene: null,
      recommendedTemplates: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      var id = to.params.id;
      vm.getScene(id);
    });
  },
  beforeRouteUpdate(to, from, next) {
    var id = to.params.id;
    this.getScene(id);
    next();
  },
  methods: {
    getScene(id) {
      var url = `/abd/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3&id=${id}&client_type=40`;
      axios.post(url).then((res) => {
        // console.log(res.data.body.currentTemplate);
        this.scene = res.data.body.currentTemplate;
        this.recommendedTemplates = res.data.body.recommendedTemplates;
      });
    },
     onClickLeft() {
      this.$router.push("/home");
    },
  },
};
</script>


<style scoped>
.scene {
  text-align: left;
  width: 90vw;
  margin: 3vh auto;
}
.scene .img {
  background: #ccc;
  width: 90vw;
  margin: 3vh auto 0px;
}
img {
  width: 100%;
  height: 100%;
}
.scene .title {
  font-weight: 800;
  margin-top: 2vh;
}

.kind-title {
  color: rgba(0, 0, 0, 0.6);
  height:5vh;
  line-height: 5vh;
  font-size: 14px;
}

.desc{
  font-size: 12px;
  color: black;
}
.keywords {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.keywords li {
  background-color: #f3f4f9;
  padding: 4px 10px;
  /* 上右下左 */
  margin:2vh 10px 0px 0px;
  border-radius: 35px;
  color: #333;
}

h3{
   width: 90vw;
  margin: 3vh auto;
}
.recommend {
   width: 90vw;
  margin: 3vh auto;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  flex-wrap: wrap;
}
.recommend .item {
  display: block;
  width: 48%;
  margin-top:3vh;
}
.recommend .item img {
  width: 100%;
}
</style>